<template> 
	<NavBar icon="left" title="基本信息" />
	<view class="h-screen bg-[#f2f2f2] p-2 ">
		<view class="bg-white rounded-md p-2 ">
			<uv-form labelWidth="80" labelPosition="left" :model="userInfo" :rules="rules" ref="formDom">
				<uv-form-item label="姓名:" borderBottom>
					<uv-input disabled v-model="userInfo.userName" border="none">
					</uv-input>
				</uv-form-item><uv-form-item label="邮箱:" prop=" email" borderBottom>
					<uv-input v-model="userInfo.email" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="联系电话:" prop=" userPhone" borderBottom>
					<uv-input v-model=" userInfo.userPhone" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item :borderBottom="false" label="图片:" prop=" userAvatar">
					<uv-image :src="userInfo.userAvatar" width="80px" height="80px" shape="circle"></uv-image>
				</uv-form-item>
			</uv-form>
		</view>
		<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
	</view>
</template>

<script setup>
	import store from '@/store/index.js'
	import * as api from '@/api/modules/user.js' 
 
	const  user  = store().user
	
	const 	userInfo =ref({
			userId: '',
			email: '',
			userPhone: '',
			userAvatar: '',
		})
	const 	rules = ref({
			'name': {
				type: 'string',
				required: true,
				message: '请填写姓名', trigger: ['blur', 'change']
			},
			'email': [{
					type: 'string',
					required: true,
					message: '请填写邮箱',
					trigger: ['blur', 'change']
				},
				{
					pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
					message: '邮箱格式错误',
					trigger: ['blur']
				}
			],
			'userPhone': [{
					type: 'string',
					required: true,
					message: '请填写联系方式',
					trigger: ['blur', 'change']
				},
				{
					pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
					message: '手机号格式错误',
					trigger: ['blur']
				}
			]
		})
		const formDom = ref()
	
			const submit = () => {
				console.log('点击率');
					// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
					formDom.value.validate().then(async () => {
						delete  userInfo.value.userAvatar
						await api.updateUserBasicAPI( userInfo.value)
					}).catch(errors => { uni.showToast({ title: '编辑失败', icon: 'none' }) })
				}
	 
	
	userInfo.value = {
		...user.userInfo
	}
</script>

<style  lang="scss">

</style>